<template>
  <div class="radarChart" :id="id"></div>
</template>

<script>
import * as echarts from "echarts";
import { data } from "jquery";
export default {
  props: {
    id: String,
    dataName: {
      type: Array,
      default: () => []
    },
    seriesData: {
      type: Array,
      default: () => [{
        value: [100, 100, 100, 100],
        name: '课程一',
        color: '#00D1C8'
      },
      {
        value: [82, 90, 40, 185,],
        name: '课程二',
        color: '#FEDB65'
      }]
    },
  },
  data() {
    return {
      radarColor: [],
      indicator: []
    };
  },
  methods: {
    draw_pie() {
      this.indicator = this.dataName.map(item => ({ text: item, max: 200 }));

      let charts = echarts.init(document.getElementById(this.id));
      let seriesData = []
      this.seriesData.forEach(item => {
        this.radarColor.push(item.color)
        seriesData.push({
          value: item.value,
          name: item.name,

          // 取消拐点
          symbolSize: 0,
          // 区域边缘线样式
          lineStyle: {
            normal: {
              color: item.color,
              width: 2
            }
          },
        })
      })
      charts.setOption({
        color: this.radarColor,
        legend: {
          //图例形状
          icon: 'squareRatio',
          top: 20,
          right: '10%',
          show: true,
          orient: 'vertical',
          itemWidth: 30,
          itemHeight: 16,
          selectedMode: false, //不允许点击图例
          itemGap: 15,
          data: ['课程一', '课程二'],
          textStyle: {
            fontSize: 14,
            color: '#ffffffc7',
          },
        },
        radar: {
          // 外圆的位置
          center: ['40%', '60%'],
          // 大小
          radius: '60%',
          name: {
            textStyle: {
              color: '#CCCCCC',
              fontSize: 14,
            }
          },
          indicator: this.indicator,
          splitArea: {
            areaStyle: {
              color: ["transparent"]
            }
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: '#2C4166',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2C4166', // 分隔线颜色
              width: 1, // 分隔线线宽
            }
          },
        },

        series:
          [
            {
              type: 'radar',
              data: this.seriesData,
              areaStyle: {}
            }
          ]
      });
      window.addEventListener("resize", function() {
        charts.resize();
      });
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.draw_pie();
    });
  },
};
</script>

<style scoped>
.radarChart {
  height: 100%;
  width: 100%;
}
</style>
